<template>
	<view class="findAccount">
		<view class="user_img">
			<image :src="list[0]?.userImg" mode=""></image>
		</view>
		<view class="user_name">
			昵称：<text>{{list[0]?.nickName}}</text>
		</view>
		<view class="user_phone">
			手机号：<text>{{list[0]?.phone}}</text>
		</view>
		<view class="user_id">
			用户ID：<text>{{list[0]?.userId}}</text>
		</view>
		<view class="vip">
			vip：<text>{{list[0]?.vip}}</text>
		</view>
		<view class="desc">
			简介：
			<text v-if="list[0]?.desc != ''">{{list[0]?.desc}}</text>
			<text v-else>暂无~~</text>
		</view>
		<view class="update">
			<!-- 修改框 -->
			<view class="update_box" v-if="isUpdate">
				<view class="u_title">
					<text>修改框</text>
				</view>
				<view class="u_box">
					<input class="u_inp" type="text" placeholder="输入昵称" v-model="nickName"/>
					<button class="u_btn" @click="UpdateNickNameFn">修改</button>
				</view>
				<view class="u_box">
					<input class="u_inp" type="text" placeholder="输入简介" v-model="desc"/>
					<button class="u_btn" @click="UpdateDescFn">修改</button>
				</view>
			</view>
			<text @click="IsUpdateFn()">修改个人资料</text>
		</view>
		
		
	</view>
</template>

<script>
	import { updateNickNameFn,updateDescFn } from '../../api/index.js'
	export default {
		data() {
			return {
				list:[],
				token:"",
				nickName:"",
				desc:"",
				isUpdate:false
			}
		},
		onLoad(options) {
			let list = options.list;
			// console.log(list);
			this.list = JSON.parse(list);
			this.token = uni.getStorageSync('token');
		},
		methods: {
			async UpdateNickNameFn(){
				await updateNickNameFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					nickName: this.nickName
				})
				.then(
					content=>{
						// console.log(content);
						let {code} = content;
						if(code == 'C001'){
							this.list[0].nickName = this.nickName;
						}
					}
				)
			},
			async UpdateDescFn(){
				await updateDescFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					desc: this.desc
				})
				.then(
					content=>{
						// console.log(content);
						let {code} = content;
						if(code == 'D001'){
							this.list[0].desc = this.desc;
						}
					}
				)
			},
			IsUpdateFn(){
				this.isUpdate = !this.isUpdate;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.findAccount{
		margin: 40rpx 20rpx;
		.user_img{
			margin-top: 20rpx;
			width: 100%;
			text-align: center;
			image{
				border-radius: 50%;
			}
		}
		.user_name{
			margin-left: 20rpx;
			text{
				font-size: 40rpx;
			}
		}
		.user_phone{
			margin-left: 20rpx;
			text{
				font-size: 40rpx;
			}
		}
		.user_id{
			margin-left: 20rpx;
			text{
				font-size: 40rpx;
			}
		}
		.vip{
			margin-left: 20rpx;
			text{
				font-size: 40rpx;
			}
		}
		.desc{
			margin-left: 20rpx;
			text{
				font-size: 40rpx;
			}
		}
		.update{
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			padding: 20rpx 0;
			background-color: #292b74;
			color: #fff;
			border-radius: 50rpx;
			margin-top: 100rpx;
			position: relative;
			.update_box{
				width: 90%;
				border: 1px solid black;
				position: absolute;
				background-color: #fff;
				bottom: 100rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				.u_title{
					font-size: 40rpx;
					color: #292b74;
					font-weight: bold;
				}
				.u_box{
					display: flex;
					width: 90%;
					height: 100rpx;
					margin-left: 5%;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					border: 1px solid black;
					line-height: 100rpx;
					border-radius: 50rpx;
					.u_inp{
						width: 70%;
						height: 100%;
						border-top-left-radius: 50rpx;
						border-bottom-left-radius: 50rpx;
						color: #000;
					}
					.u_btn{
						width: 30%;
						height: 100%;
						background-color: #292b74;
						color: #fff;
						border-radius: 0;
						border-top-right-radius: 50rpx;
						border-bottom-right-radius: 50rpx;
					}
				}
			}
		}
		
	}
</style>
